<template>
  <div class="col">
    <q-field v-bind="$attrs" v-model="text" :rules="rules" outlined dense ref="field" :value="text" @clear="clearData" :readonly="readonly || disable"
      :clearable="clearable" :hideHint="hideHint" :hideBottomSpace="true" @focus="init">
      <template #control>{{ text }}</template>
      <q-popup-proxy ref="menu" transition-show="scale" transition-hide="scale" anchor="top left" self="top left" :offset="[0, -40]"
        v-if="!(readonly || disable)">
        <div v-if="local.type === 'date' || local.type === 'datetime'" class="shadow-3 q-pt-sm">
          <select-date-time :local.sync="local" @closeSelect="closeSelect" @calcText="calcText" :options="options" :form="form" :beginDate="beginDate"
            :endDate="endDate" />
        </div>
        <div v-else-if="local.type === 'time'" class="shadow-3 q-pt-sm">
          <select-time :local.sync="local" @closeSelect="closeSelect" @calcText="calcText" />
        </div>
        <div v-else class="shadow-3 q-pt-sm">
          <select-year-month :local.sync="local" @calcText="calcText" />
          <select-year :local.sync="local" @closeSelect="closeSelect" @calcText="calcText" />
          <select-month :local.sync="local" @closeSelect="closeSelect" @calcText="calcText" />
        </div>
      </q-popup-proxy>
      <template v-slot:append>
        <q-icon :name="local.type === 'time' ? 'schedule' : 'today'" />
      </template>
    </q-field>
  </div>
</template>

<script>
import { requiredTest } from 'boot/inputTest';
import SelectDateTime from './selectdatetime';
import SelectYear from './selectyear';
import SelectMonth from './selectmonth';
import SelectYearMonth from './selectyearmonth';
import SelectTime from './selecttime';

export default {
  name: 'InputDatePicker',
  components: {
    SelectYear, SelectMonth, SelectYearMonth, SelectDateTime, SelectTime,
  },
  props: {
    readonly: Boolean,
    clearable: { type: Boolean, default: true },
    required: Boolean,
    rules: {
      type: Array,
      required: false,
      default: () => [],
    },
    formData: {
      type: Object,
      required: false,
    },
    formKey: {
      type: String,
      required: false,
    },
    type: {
      type: String,
      required: false,
      default: 'date',
    },
    value: [String, Object, Number],
    disable: [Boolean, Object],
    form: {
      type: Object,
      required: false,
    },
    beginDate: {
      type: String,
      required: false,
    },
    endDate: {
      type: String,
      required: false,
    },
    options: {
      type: Function,
      required: false,
      default: () => true,
    },
  },
  data() {
    return {
      local: {
        year: 2022,
        month: 4,
        day: 24,
        hour: 14,
        minute: 24,
        second: 12,
        showMonth: true,
        type: 'datetime',
        date: '',
        time: '',
        datetime: '',
      },
      text: '',
      hideHint: true,
      hint: '',
    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    requiredTest,
    clearData() {
      this.text = null;
      this.$emit('input', this.text);
    },
    init() {
      this.local.type = this.type;
      if (this.type === 'month') {
        this.local.showMonth = true;
      } else if (this.type === 'year') {
        this.local.showMonth = false;
      } else if (this.type === 'yearmonth') {
        this.local.showMonth = true;
      }
      if (this.formData && this.formData[this.formKey]) {
        this.text = this.formData[this.formKey];
      } else if (this.value) {
        this.text = this.value;
      }
      const d = new Date();
      if (this.text && this.text.length > 0) {
        if (this.type === 'month') {
          d.setMonth(this.text);
          d.setMonth(d.getMonth() - 1);
        } else if (this.type === 'year') {
          d.setFullYear(this.text);
        } else if (this.type === 'yearmonth') {
          const date = new Date(this.text);
          d.setFullYear(date.getFullYear());
          d.setMonth(date.getMonth());
        } else if (this.type === 'date') {
          const date = new Date(this.text);
          d.setFullYear(date.getFullYear());
          d.setMonth(date.getMonth());
          d.setDate(date.getDate());
        } else if (this.type === 'time') {
          const t = this.text;
          const array = t.split(':');
          d.setHours(array[0]);
          d.setMinutes(array[1]);
          d.setSeconds(array[2]);
        } else if (this.type === 'datetime') {
          const date = new Date(this.text);
          d.setFullYear(date.getFullYear());
          d.setMonth(date.getMonth());
          d.setDate(date.getDate());
          d.setHours(date.getHours());
          d.setMinutes(date.getMinutes());
          d.setSeconds(date.getSeconds());
        }
      }
      this.local.year = d.getFullYear();
      this.local.month = d.getMonth() + 1;
      this.local.day = d.getDate();
      this.local.hour = d.getHours();
      this.local.minute = d.getMinutes();
      this.local.second = d.getSeconds();
      const yearMonth = `${this.local.year}-${this.fillZero(this.local.month)}`;
      this.local.date = `${yearMonth}-${this.fillZero(this.local.day)}`;
      this.local.time = `${this.fillZero(this.local.hour)}:${this.fillZero(this.local.minute)}:${this.fillZero(this.local.second)}`;
      this.local.dateTime = `${this.local.date} ${this.local.time}`;
    },
    fillZero(num) {
      return num > 9 ? num : `0${num}`;
    },
    calcText() {
      const yearMonth = `${this.local.year}-${this.fillZero(this.local.month)}`;
      const date = `${yearMonth}-${this.fillZero(this.local.day)}`;
      const time = `${this.fillZero(this.local.hour)}:${this.fillZero(this.local.minute)}:${this.fillZero(this.local.second)}`;
      if (this.local.type === 'year') {
        this.text = `${this.local.year}`;
      } else if (this.local.type === 'month') {
        this.text = `${this.local.month > 9 ? this.local.month : `0${this.local.month}`}`;
      } else if (this.local.type === 'yearmonth') {
        this.text = yearMonth;
      } else if (this.local.type === 'date') {
        this.text = date;
      } else if (this.local.type === 'time') {
        this.text = time;
      } else if (this.local.type === 'datetime') {
        this.text = `${date} ${time}`;
      }
      if (this.formData) {
        this.formData[this.formKey] = this.text;
      }
      this.$emit('input', this.text);
    },
    closeSelect() {
      this.$refs.menu.hide();
    },
    reset() {
      this.text = '';
    },
  },
  watch: {
    value(v) {
      if (v && v !== this.text) {
        this.text = v;
      }
    },
  },
};
</script>

<style scoped lang="stylus">
.cc-year-dialog
  width 270px
  min-height 270px
</style>
